<template>
  <div class="app-container">
    <div class="OrderSummaryContainer">
      <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />

      <div class="flex mt10 main">
        <el-card shadow="never" :body-style="{ padding: '10px' }">
          <div slot="header" class="f16 flex AIC">
            <span style="font-weight: 600">补料单资料</span>
            <el-input v-model="backNo" placeholder="请输入退单说明" clearable @change="" style="width: 200px; height: 27px" class="ml10"></el-input>
            <el-button class="primaryBth ml10" type="primary" size="default" @click="backNoBtn">退单</el-button>
          </div>
          <Table
            :tableHeader="tableHeader"
            :tableData="tableData"
            :TableHeight="50"
            :outTableHeight="160"
            class="mt10"
            @currentRow="currentRow"
            :isLoading="isLoading"
            selection
            @selectList="selectTableList"
          />
        </el-card>

        <!-- 补制明细和底部 -->
        <el-card class="rightCardTwo" :body-style="{ padding: '10px' }" style="flex: 1">
          <!-- 标题 -->
          <div slot="header" class="f16">
            <div class="flex AIC">
              <span style="font-weight: 600">补制明细</span>
              <el-button class="primaryBth ml10" type="primary" size="default" @click="remove">删除</el-button>
            </div>
            <div class="find f14">
              <div class="flex" style="align-items: center">
                <span class="mr10">客人号</span>
                <Find :OriginalFilter="{ static: true }" :formList="formList2" :searchImg="false" />
              </div>
              <div class="flex" style="align-items: center">
                <span class="mr10">大底号</span>
                <Find :OriginalFilter="{ static: true }" :formList="formList3" :searchImg="false" />
              </div>
            </div>
          </div>
          <!-- 补制明细表格 -->
          <Table :tableHeader="tableHeader2" :tableData="tableData2" :TableHeight="30" :outTableHeight="160" class="mt10" @currentRow="currentRow2" />
        </el-card>
      </div>

      <el-card shadow="never" :body-style="{ padding: '0 20px 20px' }">
        <!-- 底部三个表格 -->
        <div class="bottom mt10">
          <div class="table2 mr10">
            <div class="title">补料明细</div>
            <Table
              :tableHeader="tableHeader3"
              :tableData="tableData3"
              :TableHeight="50"
              :outTableHeight="160"
              class="mt10"
              @currentRow="currentRow3"
            />
          </div>
          <div class="table2 mr10">
            <div class="title">指令明细</div>
            <Table :tableHeader="tableHeader4" :tableData="tableData4" :TableHeight="50" :outTableHeight="160" class="mt10" />
          </div>
          <div class="table2 mr10">
            <div class="title">责任归属明细</div>
            <Table :tableHeader="tableHeader5" :tableData="tableData5" :TableHeight="50" :outTableHeight="160" class="mt10" />
          </div>
        </div>
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '0px 20px 10px' }">
        <PageModule :PageData="{ total }" @pageSizeChange="handleSizeChange" @pageChange="pageChange" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
import { defineComponent, reactive, ref } from 'vue'
import LoginWork from '@/utils/LoginWork'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash'
import service from '@/utils/request'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'SupplementaryAudit'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import Api from '@/api/GeneralManager/Factory/SupplementaryAudit'
import { onMounted, watch } from 'vue'
import { TableList, selectList, type TableListType } from '@/plugins/mixin'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入补单号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'date',
    dateLabel: '补料日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '打勾审核'
  },
  {
    type: 'input',
    inputPlaceholder: '请输入取消审核单号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'button',
    checkboxLabel: '取消审核'
  }
]) as any
// 分页
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)

const tableData = ref([])
const tableData2 = ref([])
const tableData3 = ref([])
const tableData4 = ref([])
const tableData5 = ref([])
const imgList = ref<string[]>([])
const isLoading = ref(true)

const getTableList = debounce(async () => {
  isLoading.value = true
  let { Data, dataList, srcList } = (await TableList(formList, Api.getTableList, currentPage.value, pageSize.value)) as TableListType
  tableData.value = dataList
  total.value = Data.total
  imgList.value = srcList
  currentRow()
  isLoading.value = false
}, 500)

onMounted(async () => {
  getTableList()
})
const CurrentSlipNo = ref('')
const currentTableRow = ref({})
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentTableRow.value = row
  let { slipNo } = row || {}
  try {
    let data = await Api.getSupplementaryTableList(slipNo)
    CurrentSlipNo.value = slipNo
    tableData2.value = data.detail
    tableData3.value = data.mtl
    formList2.value = []
    formList3.value = []
    data.numberDetail.forEach((item: any) => {
      formList2.value.push({
        type: 'input',
        inputPlaceholder: '',
        inputDisabled: true,
        inputValue: item.sizeNo,
        inputLabel: ''
      })
      formList3.value.push({
        type: 'input',
        inputPlaceholder: '',
        inputDisabled: true,
        inputValue: item.soleSize,
        inputLabel: ''
      })
    })
    currentRow2()
    currentRow3()
  } catch (error) {
    console.log(error)
  }
}
// 点击表给另一张表传数据
const currentTable2Row = ref({}) as any
const currentRow2 = async (row: any = tableData2.value[0]) => {
  currentTable2Row.value = row
}
const currentRow3 = async (row: any = tableData3.value[0]) => {
  let { mtlNo } = row
  try {
    let data = await Api.getResponsibilitiesDirectivesTableList({ mtlNo, slipNo: CurrentSlipNo.value })
    tableData4.value = data.lot
    tableData5.value = data.duty
    console.log(data)
  } catch (error) {
    console.log(error)
  }
}
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const pageChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
const selectedLists = ref([])
const selectTableList = (selectedList: any) => {
  selectedLists.value = selectedList.map((item: any) => item.slipNo)
}
const backNo = ref('')
const backNoBtn = async () => {
  if (backNo.value === '') {
    JMessage.error('请输入退单原因')
    return
  }
  const res = (await LoginWork.put('/pcFactorWork/supFlagUpdate', {
    flag: 3,
    slipNo: selectedLists.value,
    remark: backNo.value
  })) as any
  if (res.code === 200) {
    JMessage.success('退单成功')
    getTableList()
  } else {
    JMessage.error(res.message)
  }
  getTableList()
}
const findClicked = async (content: string) => {
  if (content === '打勾审核') {
    if (selectedLists.value.length === 0) {
      JMessage.error('请选择数据')
      return
    }
    const res = (await LoginWork.put('/pcFactorWork/supFlagUpdate', {
      flag: 1,
      slipNo: selectedLists.value
    })) as any
    if (res.code === 200) {
      JMessage.success('打勾审核成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '取消审核') {
    if (formList.value[4].inputValue === '') {
      JMessage.warning('请输入取消审核单号')
      return
    }
    const res = (await LoginWork.put('/pcFactorWork/supFlagUpdate', {
      flag: 2,
      slipNo: [formList.value[4].inputValue]
    })) as any
    if (res.code === 200) {
      JMessage.success('取消审核成功')
      formList.value[4].inputValue = ''
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
}
const remove = async () => {
  const res = (await LoginWork.put('/pcFactorWork/supDetailDel', {
    lotNo: currentTable2Row.value.lotNo,
    partName: currentTable2Row.value.partName,
    segment: currentTable2Row.value.segment,
    slipNo: CurrentSlipNo.value
  })) as any
  if (res.code === 200) {
    JMessage.success('删除成功')
    currentRow(currentTableRow.value)
  } else {
    JMessage.error(res.message)
  }
}
const tableHeader = ref([
  {
    label: '补料单号',
    prop: 'slipNo',
    width: 150
  },
  {
    label: '补料日期',
    prop: 'slipDate'
  },
  {
    label: '补料部门',
    prop: 'dutyDeptName'
  },
  {
    label: '开单用户',
    prop: 'sysUser'
  },
  {
    label: '备注说明',
    prop: 'dutyMemo',
    width: 150
  },
  {
    type: 'img',
    label: '图片',
    fixed: true,
    prop: 'photoPath',
    srcList: imgList
  }
])
const tableHeader2 = ref([
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '货号',
    prop: 'style'
  },
  {
    label: '指令数',
    prop: 'ordQty'
  },
  {
    label: '部位',
    prop: 'partName'
  },
  {
    label: '段',
    prop: 'segment'
  },
  {
    label: '预补双数',
    prop: 'musage'
  },
  {
    type: 'tooltip',
    tooltipVal: '客人号 40  大底号 40',
    label: '左',
    prop: 'lqty1'
  },
  {
    type: 'tooltip',
    tooltipVal: '客人号 40  大底号 40',
    label: '右',
    prop: 'rqty1'
  },
  {
    label: '左',
    prop: 'lqty2'
  },
  {
    label: '右',
    prop: 'rqty2'
  },
  {
    label: '左',
    prop: 'lqty3'
  },
  {
    label: '右',
    prop: 'rqty3'
  },
  {
    label: '左',
    prop: 'lqty4'
  },
  {
    label: '右',
    prop: 'rqty4'
  },
  {
    label: '左',
    prop: 'lqty5'
  },
  {
    label: '右',
    prop: 'rqty5'
  },
  {
    label: '左',
    prop: 'lqty6'
  },
  {
    label: '右',
    prop: 'rqty6'
  },
  {
    label: '左',
    prop: 'lqty7'
  },
  {
    label: '右',
    prop: 'rqty7'
  },
  {
    label: '左',
    prop: 'lqty8'
  },
  {
    label: '右',
    prop: 'rqty8'
  },
  {
    label: '左',
    prop: 'lqty9'
  },
  {
    label: '右',
    prop: 'rqty9'
  },
  {
    label: '左',
    prop: 'lqty10'
  },
  {
    label: '右',
    prop: 'rqty10'
  },
  {
    label: '左',
    prop: 'lqty11'
  },
  {
    label: '右',
    prop: 'rqty11'
  },
  {
    label: '左',
    prop: 'lqty12'
  },
  {
    label: '右',
    prop: 'rqty12'
  },
  {
    label: '左',
    prop: 'lqty13'
  },
  {
    label: '右',
    prop: 'rqty13'
  },
  {
    label: '左',
    prop: 'lqty14'
  },
  {
    label: '右',
    prop: 'rqty14'
  },
  {
    label: '左',
    prop: 'lqty15'
  },
  {
    label: '右',
    prop: 'rqty15'
  },
  {
    label: '左',
    prop: 'lqty16'
  },
  {
    label: '右',
    prop: 'rqty16'
  },
  {
    label: '左',
    prop: 'lqty17'
  },
  {
    label: '右',
    prop: 'rqty17'
  },
  {
    label: '左',
    prop: 'lqty18'
  },
  {
    label: '右',
    prop: 'rqty18'
  },
  {
    label: '左',
    prop: 'lqty19'
  },
  {
    label: '右',
    prop: 'rqty19'
  },
  {
    label: '左',
    prop: 'lqty20'
  },
  {
    label: '右',
    prop: 'rqty20'
  },
  {
    label: '左',
    prop: 'lqty21'
  },
  {
    label: '右',
    prop: 'rqty21'
  },
  {
    label: '合计（双）',
    prop: 'totalQty'
  },
  {
    label: '补制比例',
    prop: 'percent'
  },
  {
    label: '物料编号',
    prop: 'mtlNo'
  },
  {
    label: '尺码起',
    prop: 'size1'
  },
  {
    label: '尺码止',
    prop: 'size2'
  }
])
const tableHeader3 = ref([
  {
    label: '物料编码',
    prop: 'mtlNo',
    width: 150
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    width: 150
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '需求用量',
    prop: 'reqQty'
  },
  {
    label: '原仓应发量',
    prop: 'actQty'
  },
  {
    label: '在用库存',
    prop: 'subQty'
  },
  {
    label: '责任用量',
    prop: 'actQty1'
  }
])

const tableHeader4 = ref([
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '数量',
    prop: 'qty'
  }
])
const tableHeader5 = ref([
  {
    label: '责任厂商',
    prop: 'dutyName',
    width: 150
  },
  {
    label: '责任员工',
    prop: 'dutyName2'
  },
  {
    label: '数量',
    prop: 'dutyQty'
  }
])
const formList2 = ref<any>([])
const formList3 = ref<any>([])

// const selectList = (selected: any) => {
//   console.log(selected);
// }
</script>

<style lang="less" scoped>
.main {
  justify-content: space-evenly;
}

// 底部三个表
.bottom {
  display: flex;
  justify-content: start;

  .title {
    color: #191919;
    font-weight: 600;
    font-size: 16px;
  }
}

.find {
  :deep(.form .el-form-item) {
    margin: 5px 2px 0 0 !important;
    margin-right: 10px !important;
  }

  :deep(.disable) {
    width: 65px !important;
  }
}
</style>
